/* eslint-disable jsx-a11y/interactive-supports-focus */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable react/no-array-index-key */
import React from "react";
import { Breadcrumb, Button, Tag } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";
import "./index.css";
import gateway from "./img/门户icon.png";
import downArrow from "./img/箭头-1.png";
import microService from "./img/微服务.png";
import errMicroService from "./img/微服务-异常.png";
import errorIcon from "./img/服务异常.png";
import upArrow from "./img/箭头-2.png";
import peizhizhongxin from "./img/icon_60_60px_配置中心.png";
import dandiandenglu from "./img/icon_60_60px_单点登录.png";
import jigoufuwu from "./img/icon_60_60px_机构服务.png";
import jigouguanli from "./img/icon_60_60px_机构管理.png";
import quanxianyingyong from "./img/icon_60_60px_权限应用.png";

class SITDetail extends React.PureComponent {
  render() {
    const breadcrumbItems = [
      {
        title: "首页",
        href: "/",
      },
      // {
      //   title: <a href="/sitList">开发测试环境（SIT）</a>,
      // },
      {
        title: "合同监管系统",
      },
      {
        title: "详情",
        href: "/sitDetail",
      },
    ];
    const centerData = [
      [
        { name: "上传附件", version: "V1.0.0.15", number: 1 },
        { name: "上传新附件", version: "V1.0.0.11", number: 3 },
        { name: "合格名录组件", version: "V1.0.0.8", number: 1 },
        { name: "HJJ军检验收组件", version: "V1.0.0.12", number: 1 },
        { name: "合同监督任务组件", version: "V1.0.0.13", number: 3 },
        { name: "合同监管体系组件", version: "V1.0.0.12", number: 2 },
      ],
      [
        { name: "cdj日常体系监督", version: "V1.0.0.11", number: 2 },
        { name: "通知通告及意见反馈", version: "V1.0.0.10", number: 1 },
        { name: "失信名单组件", version: "V1.0.0.8", number: 3 },
        { name: "绩效评价组件", version: "V1.0.0.8", number: 2 },
        { name: "合同交接发运组件", version: "V1.0.0.8", number: 1 },
        { name: "应急项目组件", version: "V1.0.0.8", number: 1 },
      ],
      [
        { name: "检验验收2.0", version: "V1.0.0.10", number: 1 },
        { name: "zb构型", version: "V1.0.0.8", number: 1 },
        { name: "资格审查管理组件", version: "V1.0.0.8", number: 2 },
        { name: "资格注册变更组件", version: "V1.0.0.8", number: 1 },
        { name: "资格检查组件", version: "V1.0.0.8", number: 3 },
        { name: "质量监督奖评分", version: "V1.0.0.8", number: 1 },
      ],
      [
        { name: "严重及以上质量问题上报", version: "V1.0.0.8", number: 3 },
        { name: "合同监管系统", version: "V1.0.0.15", number: 1 },
        { name: "合同费用监督组件", version: "V1.0.0.10", number: 4 },
        { name: "合同信息管理", version: "V1.0.0.20", number: 1 },
        { name: "合同质量监督组件", version: "V1.0.0.10", number: 2 },
        { name: "质量监督组件", version: "V1.0.0.8", number: 1 },
      ],
    ];
    const centerData1 = [
      { name: "上传附件", version: "V1.0.0.15", number: 1 },
      { name: "上传新附件", version: "V1.0.0.11", number: 3 },
      { name: "合格名录组件", version: "V1.0.0.8", number: 1 },
      { name: "HJJ军检验收组件", version: "V1.0.0.12", number: 1 },
      { name: "合同监督任务组件", version: "V1.0.0.13", number: 3 },
      { name: "合同监管体系组件", version: "V1.0.0.12", number: 2 },
      { name: "cdj日常体系监督", version: "V1.0.0.11", number: 2 },
      { name: "通知通告及意见反馈", version: "V1.0.0.10", number: 1 },
      { name: "失信名单组件", version: "V1.0.0.8", number: 3 },
      { name: "绩效评价组件", version: "V1.0.0.8", number: 2 },
      { name: "合同交接发运组件", version: "V1.0.0.8", number: 1 },
      { name: "应急项目组件", version: "V1.0.0.8", number: 1 },
      { name: "检验验收2.0", version: "V1.0.0.10", number: 1 },
      { name: "zb构型", version: "V1.0.0.8", number: 1 },
      { name: "资格审查管理组件", version: "V1.0.0.8", number: 2 },
      { name: "资格注册变更组件", version: "V1.0.0.8", number: 1 },
      { name: "资格检查组件", version: "V1.0.0.8", number: 3 },
      { name: "质量监督奖评分", version: "V1.0.0.8", number: 1 },
      { name: "严重及以上质量问题上报", version: "V1.0.0.8", number: 3 },
      { name: "合同监管系统", version: "V1.0.0.15", number: 1 },
      { name: "合同费用监督组件", version: "V1.0.0.10", number: 4 },
      { name: "合同信息管理", version: "V1.0.0.20", number: 1 },
      { name: "合同质量监督组件", version: "V1.0.0.10", number: 2 },
      { name: "质量监督组件", version: "V1.0.0.8", number: 1 },
    ];
    const bottomData = [
      {
        icon: peizhizhongxin,
        name: "配置中心服务",
        version: "V1.0.0.15",
        number: 2,
      },
      {
        icon: jigouguanli,
        name: "机构管理服务",
        version: "V1.0.0.15",
        number: 2,
      },
      {
        icon: dandiandenglu,
        name: "单点登录服务",
        version: "V1.0.0.8",
        number: 2,
      },
      {
        icon: jigoufuwu,
        name: "机构服务",
        version: "V1.0.0.15",
        number: 1,
      },
      {
        icon: quanxianyingyong,
        name: "权限应用服务",
        version: "V1.0.0.15",
        number: 1,
      },
    ];
    return (
      <div className="sitDetail">
        <div style={{ display: "flex", alignItems: "center" }}>
          <Button
            type="text"
            onClick={() => {
              window.history.back();
            }}
          >
            {`< 返回`}
          </Button>
          <Breadcrumb separator=">" items={breadcrumbItems} />
        </div>
        <div className="flexColumn sitDetail_content">
          <div className="flex top">
            <div className="title flex">
              <div
                style={{
                  backgroundColor: "#d8e6fa",
                  width: "80px",
                  padding: "20px 0px",
                }}
              >
                <div style={{ textAlign: "center" }}>系统</div>
                <div style={{ textAlign: "center" }}>入口</div>
              </div>
            </div>
            <div className="flexColumn content">
              <div className="flex">
                <div>
                  <img alt="" src={gateway} />
                </div>
                <div
                  className="flexColumn"
                  style={{ alignItems: "flex-start", marginLeft: "30px" }}
                >
                  <div
                    style={{
                      fontFamily: "Microsoft YaHei",
                      fontWeight: "700",
                      color: "#000000",
                      fontSize: "24px",
                    }}
                  >
                    合同监管系统门户
                  </div>
                  <div style={{ width: "100px", marginTop: "16px" }}>
                    <Button block type="primary" shape="round">
                      进入
                    </Button>
                  </div>
                </div>
              </div>
              <div style={{ marginTop: "20px" }}>
                <img alt="" src={upArrow} />
              </div>
            </div>
          </div>
          <div className="flex center">
            <div className="title flex">
              <div
                style={{
                  backgroundColor: "#d8e6fa",
                  width: "80px",
                  padding: "30px 0px",
                }}
              >
                <div style={{ textAlign: "center" }}>业</div>
                <div style={{ textAlign: "center" }}>务</div>
                <div style={{ textAlign: "center" }}>微</div>
                <div style={{ textAlign: "center" }}>服</div>
                <div style={{ textAlign: "center" }}>务</div>
              </div>
            </div>
            <div className="content flexColumn">
              {centerData1.map((service, index1) => (
                <div key={index1} style={{ position: "relative" }}>
                  {index1 % 2 === 1 && (
                    <img
                      style={{
                        position: "absolute",
                        right: "5px",
                        top: "5px",
                      }}
                      alt=""
                      src={errorIcon}
                    />
                  )}
                  <div
                    className={`serviceItem ${
                      index1 % 2 === 0 ? "normal" : "abnormal"
                    }`}
                    role="button"
                    onClick={() => {
                      if (service.name === "合同监管体系组件") {
                        window.changeView("/componentDetails");
                      }
                    }}
                  >
                    <div style={{ marginLeft: "15px" }}>
                      <img
                        alt=""
                        src={index1 % 2 === 0 ? microService : errMicroService}
                      />
                    </div>
                    <div
                      style={{
                        fontFamily: "Microsoft YaHei",
                        color: "#000000",
                        fontSize: "16px",
                        marginLeft: "10px",
                      }}
                    >
                      {service.name}
                    </div>
                    <div style={{ marginLeft: "10px" }}>
                      <Tag color={`${index1 % 2 === 0 ? "blue" : "red"}`}>
                        {`实例数：X${service.number}`}
                      </Tag>
                      <Tag color={`${index1 % 2 === 0 ? "blue" : "red"}`}>
                        {`（${service.version}）`}
                      </Tag>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="flex bottom">
            <div className="title flex">
              <div
                style={{
                  backgroundColor: "#fce9df",
                  width: "80px",
                  padding: "20px 0px",
                }}
              >
                <div style={{ textAlign: "center" }}>基础</div>
                <div style={{ textAlign: "center" }}>服务</div>
              </div>
            </div>
            <div className="flexColumn content">
              <div>
                <img alt="" src={upArrow} />
              </div>
              <div className="flex" style={{ marginTop: "20px", width: "70%" }}>
                {bottomData.map((service, index) => (
                  <div
                    onClick={() => {}}
                    role="button"
                    key={index}
                    className="flexColumn"
                    style={{
                      width: "25%",
                      height: "140px",
                      alignItems: "flex-start",
                      justifyContent: "space-evenly",
                      backgroundColor: "#fffbf8",
                      borderRadius: "4px",
                      cursor: "pointer",
                      // marginLeft: "20px",
                    }}
                  >
                    <div>
                      <img alt="" src={service.icon} />
                    </div>
                    {/* <div style={{ marginLeft: "20px" }}> */}
                    <div
                      style={{
                        fontFamily: "Microsoft YaHei UI",
                        color: "#000000",
                        fontSize: "18px",
                        // fontWeight: "550",
                      }}
                    >
                      {service.name}
                    </div>
                    <div className="flex" style={{ justifyContent: "flex-start" }}>
                      <Tag color="volcano">{`实例数：X${service.number}`}</Tag>
                      <Tag color="volcano">{`版本：${service.version}`}</Tag>
                    </div>
                    {/* </div> */}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default SITDetail;
